<style scoped lang="less">
.iot-blk{
	height: 427px;
}
</style>
<template>
	<div class="iot-blk">
		<div class="hd flex" >
			<h2 class="flex-1">报警类别统计</h2>
		</div>
		<div class="con">
			<div id="alarmTypeChart"></div>
		</div>
		<i class="corner bottom"></i>
		<i class="corner top"></i>
	</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
	name: 'iotBlk',
	props: {
		data: {
    		type: Object,
			default () {
				return null
			}
    	}
	},
	computed: {},
	watch: {},
	data () {
		return {
			type: this.$route.query.type,
			loading: false,
			chartData:null
		}
	},
	methods: {
		renderChart () {
			if(!this.chartData) return
			let that = this
			let width = 390
			let height = 360
			let data = this.chartData
			let options = {
				credits:{
					enabled: false
				},
				colors: ['#3F95FF', '#F6BD16','#5B8FF9','#9270CA'],
				chart: {
			        type: 'column',
			        width:width,
			        height:height,
					backgroundColor:'transparent',
					spacing: 0,
					margin: [50, 0, 30, 40]
			    },
			    title: {
			        text: ''
			    },
			    xAxis: {
			        categories: data.categories,
			        title: {
						text: null
					},
					labels: {
						style: {
							color: "#AFECFF",
							fontSize: 12
						}
					},
					lineColor: '#85b4d0',
			    },
			    yAxis: {
			        title: {
			            text: null
			        },
					labels: {
						style: {
							color: "#AFECFF",
							fontSize: 12
						},
					},
					minorGridLineWidth: 0,
					lineWidth: 0,
					tickWidth: 0,
					tickPosition: 'inside',
					tickmarkPlacement: 'between',
					tickColor: '#AFECFF',
					gridLineWidth: 1,
					gridLineColor: '#57789a',
					tickInterval:10
			    },
				legend: {
					enabled: false
				},
			    tooltip: {
			        shared: true
			    },
			    plotOptions: {
			        column: {
			            borderWidth: 0,
			            pointWidth: 28
			        }
			    },
			    series: data.series
			}
			HighCharts.chart('alarmTypeChart',options)
		},
		setChartData () {
			if(!this.data) return
			let categories = []
			let series = []
			let alarmData = this.data

			if(this.type == "fire" || this.type == "chargingStation"){
				categories = ['电流报警','温度报警','漏电流报警','电压报警']
				series = [{
			        name: '报警数量',
			        data: [alarmData.todayCurrentCount,alarmData.todayTemperatureCount,alarmData.todayLeakageCurrentCount,alarmData.todayVoltageCount]
			    }]
			}
			if(this.type=='gas'){
				categories = ['可燃气报警']
				series = [{
			        name: '报警数量',
			        data: [alarmData.todayGasCount]
			    }]
			}
			if(this.type=='fireControl'){
				categories = ['电气报警','消防水报警','烟感报警','其他报警']
				series = [{
			        name: '报警数量',
			        data: [alarmData.todayFireCount,alarmData.todayWaterCount,alarmData.todaySmokeCount,alarmData.todayOtherCount]
			    }]
			}
			if(this.type=='pool'){
				categories = ['压力报警','液位报警']
				series = [{
			        name: '报警数量',
			        data: [alarmData.todayWaterSprayCount,alarmData.todayFireHydrantCount]
			    }]
			}
			if(this.type=='smoke'){
				categories = ['烟雾报警','信号异常']
				series = [{
			        name: '报警数量',
			        data: [alarmData.todaySmokeCount,alarmData.todaySignalCount]
			    }]
			}
			if(this.type=='monitor'){
				categories = ['火焰报警','消防通道','脱岗离岗']
				series = [{
			        name: '报警数量',
			        data: [alarmData.todayFireCount,alarmData.todayPassWayCount,alarmData.todayLeaveCount]
			    }]
			}
			
			this.chartData = {
				categories: categories,
				series: series
			}
		},
	},
	mounted () {
		
		this.$nextTick(()=>{
			this.setChartData()
			this.renderChart()
		})
	},
}
</script>